import React,{Component} from 'react';
import {Form, Input,DatePicker,Select,Modal,message} from 'antd';
import $ from 'jquery';
import history from '../history';
require('./CreateArtical.css');
const FormItem = Form.Item;

const { TextArea } = Input;
class CreateArtical extends React.Component{

    constructor(props){
        super(props);
        this.state={
            loading: false,
            modal: false,
            userSet: {
            },
            hints: {},
            validRules: [],
        }
    }

    showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      hideModal = () => {
        this.setState({
          visible: false,
        });
      }


      //保存操作
    handleOk = (e) => {
        this.setState({
          visible: false,
        });
        var demo=this.props.form;
        demo.validateFields((err, values) => {
            $.ajax({
              type: "POST",
              url: "http://localhost:8007/artical/save",
              dataType: "json",
              contentType:"application/json",
              data:JSON.stringify(values),
              success: () => {
                message.success('增加成功!')
                this.props.fetch();
              }
            });
        });
    }

       //取消操作
    handleCancel = (e) => {
        this.setState({
          visible: false,
        });  
    }



    render(){

        const { getFieldDecorator } = this.props.form;
        return(
            <div>
                <Modal
                    title="写文章"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                <Form layout="vertical">

                    <FormItem label="标题" className="formitem">
                    {getFieldDecorator('title', {
                        rules: [{ required: true, message: '请输入标题' }],
                    })(
                        <Input  className="inputk" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="内容" className="formitem">
                    {getFieldDecorator('content', {
                        rules: [{ required: true, message: '请输入内容' }],
                    })(
                        <TextArea className="inputk" rows={4}/>
                    )}
                    </FormItem>

                    <FormItem label="作者" className="formitem">
                    {getFieldDecorator('author', {
                    rules: [{ required: true, message: '请输入作者!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="类型" className="formitem">
                    {getFieldDecorator('type', {
                    rules: [{ required: true, message: '请输入类型!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="标记" className="formitem">
                    {getFieldDecorator('sign', {
                    rules: [{ required: true, message: '请输入标记!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    {/* <FormItem label="创建日期" className="formitem">
                    {getFieldDecorator('createtime', {
                    rules: [{ required: true, message: '请输入日期!' }],
                    })(
                        <DatePicker className="inputk"/>
                    )}
                    </FormItem>

                    <FormItem label="修改日期" className="formitem">
                    {getFieldDecorator('updatetime', {
                    rules: [{ required: true, message: '请输入日期!' }],
                    })(
                        <DatePicker className="inputk" disabled/>
                    )}
                    </FormItem> */}

                    </Form>
                </Modal>
            </div>
        )
    }
}

const LoginForm = Form.create({withRef: true})(CreateArtical);
export default LoginForm;